<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">


    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('商品名称')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" value="{$row.name|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('商品分类')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input onchange="get_prop_list()" id="c-product_type_id" data-rule="required" data-source="facrm/product/product/get_type_list" class="form-control selectpage" name="row[product_type_id]" type="text" value="{$row.product_type_id|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('商品属性')}:</label>
        <div class="col-xs-12 col-sm-8">
            <dl class="fieldlist" data-template="basictpl" data-name="row[prop]">
                <dd>
                    <ins>{:__('属性名')}</ins>
                    <ins>{:__('属性值')}</ins>
                </dd>
                <dd style="display: none"><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
                <!--请注意 dd和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
                <textarea style="display: none" id="c-prop" class="form-control " rows="5" name="row[prop]" cols="50">{$row.prop|htmlentities}</textarea>
            </dl>
            <script id="basictpl" type="text/html">
                <dd class="form-inline">
                    <ins><input readonly="readonly" type="text" name="<%=name%>[<%=index%>][title]" class="form-control" value="<%=row.title%>" placeholder="属性名" size="10"/></ins>
                    <ins><input type="text" name="<%=name%>[<%=index%>][value]" class="form-control" value="<%=row.value%>" placeholder="属性值" size="10"/></ins>
                    <!--下面的两个按钮务必保留-->
                    <span style="display: none" class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                    <span style="display: none" class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                </dd>
                </script>
            </div>

        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('规格')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-specification" data-rule="required" class="form-control" name="row[specification]" type="text" value="{$row.specification|htmlentities}">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('单位')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input onchange="set_unit_value()" id="c-product_unit_id" data-rule="required" data-source="facrm/product/product/get_unit_list" class="form-control selectpage" name="row[product_unit_id]" type="text" value="{$row.product_unit_id|htmlentities}">
            </div>
        </div>
        <div class="form-group" style="display: none">
            <label class="control-label col-xs-12 col-sm-2">隐藏的input，用于储存单位的值</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-unit" data-rule="required" class="form-control" name="row[unit]" type="text" value="{$row.unit|htmlentities}">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('编码')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-sku" class="form-control" name="row[sku]" type="text" value="{$row.sku|htmlentities}">
            </div>
        </div>
    <div class="form-group">
        <label for="c-inventory" class="control-label col-xs-12 col-sm-2">{:__('库存')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-inventory" class="form-control" name="row[inventory]" type="number" value="{$row.inventory}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('价格')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-price" class="form-control" step="0.01" name="row[price]" type="number" value="{$row.price}">
        </div>
    </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('备注')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-remark" class="form-control" name="row[remark]" type="text" value="{$row.remark|htmlentities}">
            </div>
        </div>
        <div class="form-group layer-footer">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
                <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        //获取分类属性值
        function get_prop_list() {
            var type_id = document.querySelector('#c-product_type_id').value
            if (type_id == null || type_id == '') {
                return
            } else {
                $.ajax({
                    url: 'facrm/product/product/get_type_prop',
                    data: {
                        'type_id': type_id
                    },
                    success: function (data, textStatus, xhr) {
                        if (data != null && data != '') {
                            $('#c-prop').val(data)
                            var form = $('#edit-form')
                            $(".fieldlist", form).each(function () {
                                var container = this;
                                var textarea = $("textarea[name='" + $(this).data("name") + "']", form);
                                if (textarea.val() == '') {
                                    return true;
                                }
                                var template = $(this).data("template");
                                var json = {};
                                try {
                                    json = JSON.parse(textarea.val());
                                } catch (e) {
                                }
                                //移除原来的元素
                                $('.form-inline').remove()
                                //添加新元素
                                $.each(json, function (i, j) {
                                    $(".btn-append,.append", container).trigger('click', template ? j : {
                                        key: i,
                                        value: j
                                    });
                                });
                            });
                        } else {
                            $('.form-inline').remove()
                            $('#c-prop').val(data)
                        }

                    },
                    error: function (xhr, textStatus, error) {

                    }
                });
            }
        }

        //设置单位值
        function set_unit_value() {
            var unit = document.querySelector('#c-product_unit_id_text').value
            document.querySelector('#c-unit').value = unit
        }
    </script>
